<template>
    <div>
        <Form ref="form1" :model="form1" :label-width="120">
            <div v-if="!switchFlag">
                <Row :gutter="16" class="query-form2">
                    <i-col span="8">
                        <FormItem label="计划名称：" prop="planName">
                            <Input type="text" v-model="form1.planName"/>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="排查部门：" prop="screenOrgId">
                            <cascaderDom ref="existOrg" @setOrgInfo="setOrgInfo" :orgTree="true" :rootOrgId="rootOrgId"></cascaderDom>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <div style="float: right;">
                            <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                            <Button @click="reset" class="ivu-btn-reset" style="margin-left: 10px" >重置</Button>
                            <Button @click="switchQuery(true)" style="margin-left: 10px" class="ivu-btn-switch2" type="text" >展开<Icon type="ios-arrow-down"/></Button>
                        </div>
                    </i-col>
                </Row>
            </div>
            <div v-else>
                <Row class="query-form" :gutter="16">
                    <i-col span="8">
                        <FormItem label="计划名称：">
                            <Input type="text" v-model="form1.planName"/>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="排查部门：" prop="screenOrgId">
                            <cascaderDom ref="existOrg" @setOrgInfo="setOrgInfo" :orgTree="true" :rootOrgId="rootOrgId"></cascaderDom>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="排查岗位：" prop="screenPositionName">
                            <Input type="text" v-model="form1.screenPositionName"/>
                        </FormItem>
                    </i-col>
                </Row>
                <Row class="query-form2" :gutter="16">
                    <i-col span="24">
                        <div style="float: right;">
                            <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                            <Button @click="reset" class="ivu-btn-reset" style="margin-left: 10px">重置</Button>
                            <Button @click="switchQuery(false)" style="margin-left: 10px" class="ivu-btn-switch2" type="text" >收起<Icon type="ios-arrow-up" /></Button>
                        </div>
                    </i-col>
                </Row>
            </div>
        </Form>
        <Row type="flex" justify="start" class="query-form">
            <i-col>
                <Button icon="md-open" class="ivu-btn-add" @click="addInfo">全部延期</Button>
            </i-col>
        </Row>
        <Table ref='table' :loading="loading" size="small" :height="tableHeight" class="table" no-data-text="没有查询到相关数据!"
               highlight-row stripe border :columns="columns1" width="100%" :data="dataTable">
        </Table>
        <Row style="margin-right:10px;">
            <i-col span="24">
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize"
                      @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
                      show-total show-sizer show-elevator/>
            </i-col>
        </Row>
        <Modal title="排查计划延期操作" :transfer=false v-model="viewModal" :width=600>
            <Form ref="viewForm" :model="formData" label-position="top" :rules="ruleCustom">
                <FormItem label="是否进行延期" prop="ifDelay">
                    <Row>
                        <i-col span="24">
                            <Select v-model="formData.ifDelay">
                                <Option value="1">是</Option>
                                <Option value="0">否</Option>
                            </Select>
                        </i-col>
                    </Row>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="primary" class='ivu-btn-save' :loading="buttonLoading" @click="saveData()">确定</Button>
                <Button type="primary" class='ivu-btn-cancel' @click="viewModal=false" style="margin-left: 2px">取消</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {sessionStorage} from '@/common/cacheUtils.js';
    import {Api} from '@/api/index.js'
    import cascaderDom from '../../../components/cascader-dom'

    export default {
        components: {
            cascaderDom
        },
        name: "expirePlan",
        data(){
            return{
                buttonLoading: false,
                formData: false,
                ruleCustom: {
                    ifDelay: [{required: true, message: '  ', trigger: 'blur,change'}],

                },
                viewModal: false,
                columns1: [
                    { title: '序号', width: 80, fixed: 'left', align: 'center', render: (h, params) => {
                            return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
                        }
                    },
                    { key:'planName',title: '计划名称',  align: 'center', minWidth: 180},
                    { key:'startDate',title: '计划开始日期',  align: 'center', minWidth: 180,
                        render: (h, params) => {
                            return h('span', this.formatDate(new Date(params.row.startDate),"yyyy-MM-dd"));
                        }
                    },
                    { key:'endDate',title: '计划结束日期',  align: 'center', minWidth: 180,
                        render: (h, params) => {
                            return h('span', this.formatDate(new Date(params.row.endDate),"yyyy-MM-dd"));
                        }
                    },
                    {
                        minWidth: 130,
                        title: '排查岗位',
                        key: 'screenPositionName',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        minWidth: 80,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                    },
                                    on: {
                                        click: () => {
                                            this.viewModal = true;
                                            this.formData = params.row;
                                            this.formData.editType = 1;
                                            if(this.formData.screenUserId != null && this.formData.screenUserId != '')
                                                this.formData.distributeType = '1';
                                            else
                                                this.formData.distributeType = '0';
                                        }
                                    }
                                }, '延期')
                            ]);
                        }
                    }
                ],
                loading: false,
                dataTable: [],
                tableHeight: '',
                pageSizeArray: [10, 20, 50],
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1,
                },
                form1: {},
                switchFlag: false,
            }
        },
        watch: {
            "viewModal": function(qw,er){
                if(!qw){
                    this.formData = {};
                }
            }
        },
        mounted(){
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
            this.query();
        },
        methods: {
            query(){
                this.loading = true;
                let data = {
                    currentPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize,
                    planName: this.form1.planName,
                    checkCycle: this.form1.checkCycle,
                    screenPositionName:this.form1.screenPositionName,
                    orgId:sessionStorage('userId').getObject('userId').companyId
                };
                // if(this.form1.screenOrgId != ""){
                //     data.orgId = this.form1.screenOrgId;
                // }
                let url = Api.getExpirePlanDataList;
                this.$http.get(url, {params: data}).then((res) => {
                    this.dataTable = res.data.data.data;
                    this.pagedata.total = res.data.data.totalSize;
                    this.loading = false;
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            reset(){
                this.form1 = {};
                this.query();
            },
            pageChange(pageNum) {
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            pageSizeChange(pageSize) {
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            switchQuery(flag){
                this.switchFlag = flag;
                if(this.switchFlag) {
                    this.tableHeight = this.tableHeight - 74;
                }else{
                    this.tableHeight = this.tableHeight + 74;
                }
            },
            setOrgInfo(data){
                this.form1.screenOrgId = data[data.length - 1];
            },
            formatDate(date, fmt) {
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                let o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (let k in o) {
                    if (new RegExp(`(${k})`).test(fmt)) {
                        let str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                    }
                }
                return fmt;
            },
            padLeftZero(str) {
                return ('00' + str).substr(str.length);
            },
            saveData(){
                this.$refs['viewForm'].validate((valid) => {
                    if(valid){
                        this.buttonLoading = true;
                        this.formData.createOrgId = sessionStorage('userId').getObject('userId').companyId
                        this.$http.put(Api.updateExpirePlan, this.formData).then(function(response){
                            this.buttonLoading = false;
                            this.viewModal = false;
                            if(response.data.status == 200){
                                this.$Message.success({ content: '保存成功', duration: 4 });
                                this.query();
                            }else{
                                this.$Message.error({ content: response.data.msg, duration: 4 });
                            }
                        });
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>
